"use client";
import { ellipseAddress } from "@/utils/display";
import { useWeb3Modal } from "@web3modal/wagmi/react";
import { useAccount } from "wagmi";  

export default function Connector() {
  const { address } = useAccount();
  const { open, close } = useWeb3Modal(); 

  return (
    <>
      <button
        onClick={() => open()}
        className=" transition-all rounded-lg text-xs lg:text-lg h-10 flex items-center font-medium"
      >
        {address ? (
          <div
            className={
              "flex items-center justify-center rounded-lg px-5 hover:bg-[#00D062] hover:text-black w-full h-full border border-[#00D062] text-[#00D062]"
            }
            onClick={() =>
              open({
                view: "Account",
              })
            }
          >
            {ellipseAddress(address)}
          </div>
        ) : (
          <div className="flex items-center justify-center border border-[#00D062] bg-[#00D062] hover:bg-transparent hover:text-[#00D062] rounded-lg px-5   w-full h-full">
            Connect Wallet
          </div>
        )}
      </button>
      {/* <Account show={show} setShow={setShow} /> */}
    </>
  );
}
